<!doctype html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="{{ url_for('static', filename='icon.ico') }}">

	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

	<title>YouTube Viewer</title>

	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<style>
		.scroll {
			max-height: 550px;
			overflow-y: auto;
			display: flex;
			flex-direction: column-reverse;
		}
	</style>
</head>

<body>
	<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
		<div class="container-fluid d-flex justify-content-center">
			<h1 class="d-flex align-items-center fs-4 text-white mb-0">
				<img src="{{ url_for('static', filename='icon.ico') }}" width="38" height="38" class="me-3" alt="">
				YouTube Viewer
			</h1>
		</div>
	</header>

	<div class="card text-white mx-auto bg-dark bg-gradient mb-3 mt-3" style="width: 95%">
		<div class="card-header">
			<h3>Live Logs</h3>
		</div>
		<div class="card-body scroll">
			{% for n in range(1,201) %}
			<p class="card-text mb-0 mt-0" id="logs-{{n}}"> </p>
			{% endfor %}
		</div>
	</div>

	<nav class="navbar navbar-light mx-auto justify-content-center mt-5 bg-dark">
		<span class="navbar-brand mb-0 h1 text-white">Summary</span>
	</nav>

	<table class="table table-striped table-bordered table-hover table-success mx-auto mb-3 mt-3" style="width: 95%"
		id="summary_table">

	</table>


	<nav class="navbar navbar-light mx-auto justify-content-center mt-5 bg-dark">
		<span class="navbar-brand mb-0 h1 text-white">Statistics</span>
	</nav>

	<table class="table table-striped table-bordered table-hover table-success mx-auto mb-3 mt-3" style="width: 95%"
		id="video_statistics">

	</table>


	<div class="container-fluid d-flex justify-content-center mt-3">
		<div class="dropdown">
			<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton"
				data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</button>
			<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
				{% for item in dropdownitems %}
				<a class="dropdown-item" href="javascript:void(0);">{{ item }}</a>
				{% endfor %}
			</div>
		</div>

	</div>

	<div class="container-fluid d-flex justify-content-center" id="chart_div" style="height: 500px;"></div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="{{url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
	<script src="{{ url_for('static', filename='app.js') }}"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
		integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
		integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
		crossorigin="anonymous"></script>

</body>

</html>